import React from "react";
import { connect } from "dva";
import {Form, Input, DatePicker, Button, Select, Modal} from "antd";
import moment from "moment";
import styles from "./Search.less";
import {handleBatchCompensation} from "@/pages/flowmonitor/eventlist/services";

const { RangePicker } = DatePicker;
const { Option } = Select;

const formItemLayout = {
  labelCol: {
    xs: { span: 6 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 18 },
    sm: { span: 18 },
  },
};
const statusConfig = [
  { label: "已补偿", value: "1" },
  { label: "未补偿", value: "0" },
];

const eventTypeConfig = [
  { label: "开始节点前置", value: "开始节点前置" },
  { label: "开始节点后置", value: "开始节点后置" },
  { label: "任务前置", value: "任务前置" },
  { label: "任务后置", value: "任务后置" },
  { label: "结束节点前置", value: "结束节点前置" },
  { label: "结束节点后置", value: "结束节点后置" },
  { label: "待办新增", value: "待办新增" },
  { label: "待办状态修改", value: "待办修改" },
  { label: "待办更新", value: "待办更新" },
];

const callMethodConfig = [
  { label: "同步", value: "同步" },
  { label: "异步", value: "异步" },
];

class EventSearch extends React.Component {
  componentDidMount() {
    const { form, onRef } = this.props;
    onRef(form);
  }
  handleBatchCompensation = () => {
    const { form, updateState } = this.props;
    form.validateFields((err, values) => {
      if (err) return;

      const { rangeTime, modelKey, modelName, modelId,nodeCode,eventType,callMethod,processInstanceId,name,status} = values;

      let timeStart = "";
      let timeEnd = "";

      if (Array.isArray(rangeTime)) {
        if (rangeTime[0]) {
          timeStart = rangeTime[0].valueOf();
        }
        if (rangeTime[1]) {
          timeEnd = rangeTime[1].valueOf();
        }
      }

      handleBatchCompensation({ modelKey, modelName,modelId,nodeCode, timeStart, timeEnd,eventType,callMethod,processInstanceId,name, status});
    });

  };

  handleReset = () => {
    const { form, updateState } = this.props;
    updateState({});
    form.resetFields();
  };

  handleSumbit = () => {
    const { form, updateState } = this.props;
    form.validateFields((err, values) => {
      if (err) return;

      const { rangeTime, modelKey, modelName, modelId,nodeCode,eventType,callMethod,processInstanceId,name,status} = values;

      let timeStart = "";
      let timeEnd = "";

      if (Array.isArray(rangeTime)) {
        if (rangeTime[0]) {
          timeStart = rangeTime[0].valueOf();
        }
        if (rangeTime[1]) {
          timeEnd = rangeTime[1].valueOf();
        }
      }

      updateState({ modelKey, modelName,modelId,nodeCode, timeStart, timeEnd,eventType,callMethod,processInstanceId,name, status});
    });
  };

  render() {
    const { form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Form
        className={styles.formcon}
        onSubmit={(e) => {
          e.preventDefault();
        }}
        {...formItemLayout}
      >
        <div className={styles.first}>

          <div>
            <span className={styles.label}>模型编码</span>
            <Form.Item>
              {getFieldDecorator(
                "modelKey",
                {},
              )(
                <Input
                  placeholder="请输入模型编码"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>

          <div>
            <span className={styles.label}>模型名称</span>
            <Form.Item>
              {getFieldDecorator(
                "modelName",
                {},
              )(
                <Input
                  placeholder="请输入模型名称"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>模型id</span>
            <Form.Item>
              {getFieldDecorator(
                "modelId",
                {},
              )(
                <Input
                  placeholder="请输入模型Id"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>节点编码</span>
            <Form.Item>
              {getFieldDecorator(
                "nodeCode",
                {},
              )(
                <Input
                  placeholder="请输入节点编码"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>补偿状态</span>
            <Form.Item>
              {getFieldDecorator(
                "status",
                {},
              )(
                <Select placeholder="请选择补偿状态" style={{ minWidth: 250 }}>
                  {statusConfig.map(({ label, value }) => (
                    <Option key={value} value={value}>
                      {label}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>事件类型</span>
            <Form.Item>
              {getFieldDecorator(
                "eventType",
                {},
              )(
                <Select placeholder="请选择事件类型" style={{ minWidth: 250 }}>
                  {eventTypeConfig.map(({ label, value }) => (
                    <Option key={value} value={value}>
                      {label}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>调用时机</span>
            <Form.Item>
              {getFieldDecorator(
                "callMethod",
                {},
              )(
                <Select placeholder="请选择事件调用时机" style={{ minWidth: 250 }}>
                  {callMethodConfig.map(({ label, value }) => (
                    <Option key={value} value={value}>
                      {label}
                    </Option>
                  ))}
                </Select>,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>流程实例id</span>
            <Form.Item>
              {getFieldDecorator(
                "processInstanceId",
                {},
              )(
                <Input
                  placeholder="请输入流程实例id"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>事件名称</span>
            <Form.Item>
              {getFieldDecorator(
                "name",
                {},
              )(
                <Input
                  placeholder="请输入事件名称"
                  style={{ minWidth: 250 }}
                />,
              )}
            </Form.Item>
          </div>
          <div>
            <span className={styles.label}>产生时间</span>
            <Form.Item>
              {getFieldDecorator("rangeTime", {
                initialValue: null,
              })(
                <RangePicker
                  allowClear
                  showTime={{
                    hideDisabledOptions: true,
                    defaultValue: [moment("HH:mm:ss"), moment("HH:mm:ss")],
                  }}
                  format="YYYY-MM-DD HH:mm:ss"
                  style={{ maxWidth: 335 }}
                />,
              )}
            </Form.Item>
          </div>
        </div>
        <div className={styles.second}>
          <div>
            <Button
              type="primary"
              onClick={this.handleSumbit}
              style={{ marginRight: "8px" }}
            >
              查询
            </Button>
            <Button onClick={this.handleReset}>重置</Button>
            <Button onClick={this.handleBatchCompensation}>批量补偿</Button>
          </div>
        </div>
      </Form>
    );
  }
}

export default connect(null, (dispatch) => ({
  updateState(payload) {
    return dispatch({
      type: "event/updateState",
      payload,
    });
  },
  handleBatchCompensation(payload) {
    return dispatch({
      type: "event/handleBatchCompensation",
      payload,
    }).then((res) => {
      let resultTitle;
      if (res.errCode === 0) {
        resultTitle="补偿成功";
      }
      else{
        resultTitle="补偿失败";
      }
      alert(resultTitle);
    });
  },
}))(Form.create()(EventSearch));
